<template>
	<section v-loading="listLoading">
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.title" clearable placeholder="关键词"></el-input>
				</el-form-item>
				<el-form-item label="团购状态">
		            <el-select v-model="filters.state" clearable> 
		                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
		            </el-select>
			    </el-form-item>
				<el-form-item>
					<el-button type="primary" size="medium" v-on:click="handleCurrentChange(1)">查询</el-button>
				</el-form-item>
				<el-form-item class="fr">
				    <el-button type="primary" size="medium" plain @click="handleAdd">新增</el-button>
			    </el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="groupList" stripe highlight-current-row @selection-change="selsChange" border style="width: 100%;">
			<el-table-column prop="id" label="ID" min-width="40" align="center"></el-table-column>			
			<el-table-column prop="title" label="团购标题" width="150" align="center" />
			<el-table-column label="活动图片" align="center" width="80">
                <template slot-scope="scope">
            		<el-popover placement="top-start" title="" trigger="click">
                        <img :src="scope.row.activeImgPath" alt="" style="width: 500px;">
                        <img slot="reference" :src="scope.row.activeImgPath" style="width: 40px;height: 40px;object-fit: cover;border-radius: 5px;">
                    </el-popover>
            	</template>
            </el-table-column>
			<el-table-column label="活动时间" align="center" prop="beginTime" width="260">
				<template slot-scope="scope">
					<div>
						{{ scope.row.beginTime + '~' + scope.row.endTime  }}
					</div>
				</template>
			</el-table-column>
			
			<!-- <el-table-column label="商品名称" align="center" prop="linkName" /> -->
			<el-table-column label="成团人数" align="center" prop="userCount" />
			<!-- <el-table-column label="团购数量" align="center" prop="saleCount" /> -->
			<!-- <el-table-column label="单买价格" align="center" prop="normalPrice">
				<template slot-scope="scope">
					<div>{{scope.row.normalPrice}}元</div>
				</template>
			</el-table-column> -->
			<el-table-column label="拼团价格" align="center" prop="groupBuyPrice">
				<template slot-scope="scope">
					<div>{{scope.row.groupBuyPrice}}元</div>
				</template>
			</el-table-column>
			<el-table-column label="省下金额" align="center" prop="saveMoney">
				<template slot-scope="scope">
					<div>{{scope.row.saveMoney}}元</div>
				</template>
			</el-table-column>
			<el-table-column label="购买方式" align="center" prop="isOneBuy" width="100">
				<template slot-scope="scope">
					<div>
						<el-tag v-if="scope.row.isOneBuy === 0" style="cursor: pointer" size="'mini'" :type="''">仅限拼团</el-tag>
						<el-tag v-if="scope.row.isOneBuy === 1" style="cursor: pointer" size="'mini'" :type="'success'">可单独购买</el-tag>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="团购状态" align="center" prop="state">
				<template slot-scope="scope">
					<div>
					<el-tag v-if="scope.row.state === 0" style="cursor: pointer" :type="'danger'">未开启</el-tag>
					<el-tag v-if="scope.row.state === 1" style="cursor: pointer" :type="'success'">已开启</el-tag>
					<el-tag v-if="scope.row.state === 2" style="cursor: pointer" :type="''">已结束</el-tag>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="排序索引" align="center" prop="sort" />
			<el-table-column label="操作" width="260" align="center">
				<template slot-scope="scope">
					<!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" :type="'success'">拼团列表</el-button> -->
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" plain size="mini" @click="handleDel(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next, jumper" @current-change="handleCurrentChange" :page-size="filters.pageSize" :total="total" style="float:right;" />
		</el-col>
		
		<!--编辑界面-->
		<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false" width="800px" style="margin-top: -80px;"> 
			<el-form :model="editForm" label-width="120px" ref="editForm">
				<el-row>
					<el-col :span="12">
						<el-form-item label="团购标题" prop="title">
							<el-input v-model="editForm.title" placeholder="请输入团购标题" size="mini" :rules="[{ required: true, message: '请填写团购标题', trigger: 'blur' }]"/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="活动时间" prop="dateRange">
							<el-date-picker v-model="editForm.dateRange" size="mini" clearable style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
								range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="可否单独购买" prop="isOneBuy">
							<el-select v-model="editForm.isOneBuy" size="mini" style="width:100%;">
								<el-option :value="0" label="不可单独购买"></el-option>
								<el-option :value="1" label="可单独购买"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="团购状态" prop="state">
							<el-select v-model="editForm.state" size="mini" style="width:100%;">
								<el-option :value="0" label="未开启"></el-option>
								<el-option :value="1" label="已开启"></el-option>
								<el-option :value="2" label="已结束"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="成团人数" prop="userCount">
							<el-input v-model="editForm.userCount" placeholder="请输入成团人数" size="mini" type="number">
								<template slot="append">人</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="拼团价格" prop="groupBuyPrice">
							<el-input v-model="editForm.groupBuyPrice" placeholder="请输入拼团购买的价格" size="mini" type="number">
								<template slot="append">元</template>
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="立省金额" prop="saveMoney">
							<el-input v-model="editForm.saveMoney" placeholder="请输入立省金额" size="mini" type="number">
								<template slot="append">元</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="排序索引" prop="sort">
							<el-input v-model="editForm.sort" type="number" placeholder="请输入排序索引" size="mini"/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">						
						<el-form-item label="活动图片">
							<el-upload class="avatar-uploader photo" list-type="picture-card" :http-request="(res)=>{return UploadGroup(res)}" 
								:multiple="false" :show-file-list="false" action="" :before-upload="beforeAvatarUpload" accept="*/">
								<img v-if="editForm.activeImgPath" :src="editForm.activeImgPath" style="width:95%;height:95%;border-radius: 5px;padding-top:5px;object-fit: cover;">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" @click.native="editFormVisible = false">取消</el-button>
				<el-button size="mini" type="primary" @click.native="editSubmit">确定</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import { client ,getFileNameUUID} from '../../common/js/alioss'
	import util from '../../common/js/util'
		const toolbarOptions = [
		[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
		['bold', 'italic', 'underline', 'strike'],// toggled buttons
		['blockquote', 'code-block'],
		[{ 'list': 'ordered'}, { 'list': 'bullet' }],
		[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
		[{ 'direction': 'rtl' }], // text direction
		[{ 'align': [] }],
		['image']
	]
	export default {
		name: "Group",
		props: {
			limit: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				filters: {
					pageNum: 1,
					pageSize: 10,
					title: '',
					state: '',
					linkId:'',
				},
				options:[
					{ value:0, label:'未开启' },
					{ value:1, label:'已开启' },
					{ value:2, label:'已结束' }
				],
				groupList: [],
				sels: [],
				total: 0,
				listLoading: false,
				editLoading:false,
				editFormVisible:false,
				editForm:{
					id:'',
					title: '',
					activeImg:'',
					activeImgPath:'',
					cateId:0,
					cateChildId:0,
					buyType: '',
					linkType: 1,
					isNewUserGroup:0,
					linkId: 0,
					userCount: '',
					saleCount: '',
					normalPrice: '',
					groupBuyPrice: '',
					saveMoney:'',
					beginTime: '',
					endTime: '',
					isOneBuy: 0,
					goods:'',
					state: '',
					sort: '',
					dateRange:[],
				},		
			}
		},
		mounted() {
			this.getGroupList();
		},
		methods: {
			//获取商品拼团列表
			getGroupList:function (){
				this.listLoading = true;
				console.log('filters', this.filters)
				var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},});  
				instance.post('admin/group/goods/list', this.qs.stringify(this.filters)).then(data => {
					let res = data.data;
					console.log(data);
					if (res.code !== 0) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						this.total = res.total;
						this.groupList = res.rows;
						this.listLoading = false;
					}
				});
			},
		    //添加图片
		    beforeAvatarUpload(file) {},//图片上传到阿里云				
			//上传拼团活动图片
		    UploadGroup(file) {
		    	var fileName = 'webStorage/web_' + file.file.uid + Math.floor(Math.random()*10000) + file.file.name.substr(file.file.name.indexOf("."));
				client().put(fileName, file.file).then(result => {
					console.log('UploadGroup', result);
					this.editForm.activeImg = result.name;
					this.editForm.activeImgPath = result.url;
				}).catch(function (err) {
                    console.log(err);
	 			});
		    },
			handleCurrentChange(val) {
				this.filters.pageNum = val;
				this.getGroupList();
			},
			//显示新增界面
			handleAdd: function () {
				this.$router.push("/goods")
			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.editFormVisible = true
				this.editForm.linkId = row.linkId;
				this.editForm.id = row.id;
				
				var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},});  
				instance.post('admin/group/detail', this.qs.stringify({groupId:row.id})).then(data => {
					let res = data.data;
					if (res.code !== 0) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						this.editForm = res.data;
					}
				});
			},
			//编辑
			editSubmit: function () {
				this.editForm.goods = {};
				this.editForm.groupOpenList = [];
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确定修改吗?', '提示', {}).then(() => {
							this.editLoading = true;
							var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},});  
							instance.post('admin/group/update', this.qs.stringify(this.editForm)).then(data => {								
								let  res = data.data;
								if (res.code !== 0) {
									this.$message({
										message: res.msg,
										type: 'error'
									});
								} else {
									this.editLoading = false;
									this.$message({
										message: '成功',
										type: 'success'
									});
									this.$refs['editForm'].resetFields();
									this.editFormVisible = false;
									this.getGroupList();
								}
							});
						});
					}
				});
			},			
			selsChange: function (sels) {
				this.sels = sels;
			},
			//删除
			handleDel(id) {
				this.$confirm('确定删除吗?', '提示', {}).then(() => {
					this.listLoading = true;
					var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},});  
					instance.post('admin/group/delete', this.qs.stringify({id: id})).then(data => {						
						let  res = data.data;
						if (res.code !== 0) {
							this.$message({
								message: res.msg,
								type: 'error'
							});
						} else {
							this.$message({
								message: '成功',
								type: 'success'
							});
							this.getGroupList();
						}
					})
				}).catch(() => {

				});
			},
		},
	}

</script>
<style>
	.advice{
		margin-left: 80px;
		margin-bottom: 10px;
		font-size: 12px;
	}
	.advice1{
		margin-left: 100px;
		margin-bottom: 10px;
		font-size: 12px;
	}
	.uploadImg{
  	    display: flex;
  	    flex-direction: row;
  	    flex-wrap: wrap;
    }
    .uploadImgItem{
  	    display: flex;
  	    flex-direction: row;
  	    flex-wrap: wrap;
  	    margin-right: 10px;
  	    margin-bottom: 10px;
     	width: 145px;
  	    height: 145px;
  	    position: relative;
    }
    .uploadImgItemDel{
  	    position: absolute;
  	    top: -5px;
  	    right: -5px;
  	    width: 30px;
  	    height: 30px;
    }
  
    .plantingGoodsFarm{
		margin-top: 24px;
		padding: 10px;
		background: #FBFBFB;
		border-radius: 10px;
	}
	.plantingGoodsFarmHead{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 20px;
		margin-bottom: 10px;
	}
	.plantingGoodsFarmHeadSpan{
		color: #000000;
		font-weight: 600;
	}
	.plantingGoodsFarmHeadDiv{
		color: #00C751;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.plantingGoodsFarmHeadDiv span{
		margin-right: 10px;
	}
	.plantingGoodsFarmMainRight{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 20px;
		color: #FF4457;
	}
	.plantingGoodsFarmMainRight span{
		margin-right: 10px;
	}
	.plantingGoodsFarmMain{
		padding-bottom: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.plantingGoodsFarmMain-content{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		
		
	}
	.plantingGoodsFarmMain1{
		background: #F4F4F4;
		padding: 10px;
		margin-bottom: 10px;
	}
	.zhuguige{
    	display: flex;
    	flex-direction: row;
    	align-content: center;
    	justify-content: space-between;
    }
    .security{
    	display: flex;
		flex-direction: row;
		align-items: center;
    }
    
    .security-item{
    	margin-right: 10px;
    }
    
</style>
